<template>
	<view class="contentitem" @click="navto('/pages/contxt/details')">
		<view class="u-flex u-flex-y-center">
			<image :src="URL(item.userInfo.avatar)" class="contentitem__tx" mode="aspectFill"></image>
			<view class="contentitem__nickname">
				{{item.userInfo.username}}
			</view>
			<view class="contentitem__time">
				{{$u.timeFrom(item.createtime, 'yyyy-mm-dd hh:MM')}}
				<!-- 1小时前 -->
			</view>
		</view>
		<view class="">
			<view class="contentitem__title">
				<view class="contentitem__zd" v-if="false">
					置顶
				</view>
				{{item.title}}
			</view>
			<view class="contentitem__text">
				{{item.title}}
				{{item.content}}
			</view>
			<view class="contentitem__pics" :class="list.length%3==0?'u-flex-between':''">
				<image :src="URL(item1)" class="contentitem__pics__pic"
					:class="list.length%3==0?'contentitem__pics__pic1':''" v-for="(item1,index) in list"
					mode="aspectFill" :key="index"></image>
			</view>

			<view class="u-flex u-flex-y-center">
				<view class="contentitem__ht">
					<image src="/static/home/huati.png" class="contentitem__ht__icon" mode=""></image>
					{{item.cate}}
				</view>
				<view class="contentitem__eye" style="flex: 1;">
					<!-- 1274人围观 -->
				</view>
				<image src="/static/home/dz.png" v-if="!item.good" class="contentitem__icon" mode=""
					@click.stop="clickdz"></image>
				<image src="/static/home/dzth.png" v-else class="contentitem__icon" mode="" @click.stop="clickdz">
				</image>
				<view class="contentitem__num">
					{{item.goodNum}}
				</view>
				<image src="/static/home/pl.png" class="contentitem__icon" mode=""></image>
				<view class="contentitem__num">
					{{item.comment.total}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "contentitem",
		props: {
			item: Object
		},
		data() {
			return {
				list:this.item.images.split(',').filter(Boolean),
				
			};
		},
		methods: {
			clickdz() {
				this.$emit('dz')
			}
		}
	}
</script>

<style lang="scss">
	.contentitem {
		padding: 30rpx 2rpx 26rpx 4rpx;
		border-bottom: 2rpx solid #F7F7F7;
		background-color: #ffffff;

		&__tx {
			width: 65rpx;
			height: 65rpx;
			background: #616161;
			margin-right: 20rpx;
			border-radius: 50%;
		}

		&__nickname {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 27rpx;
			color: #868686;
			flex: 1;
		}

		&__time {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #B0B0B0;
		}

		&__title {
			display: flex;
			align-items: center;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #2E2E2E;
			line-height: 43rpx;
			margin-top: 10rpx;
		}

		&__zd {
			width: 62rpx;
			height: 36rpx;
			background: #6086DB;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			margin-right: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 23rpx;
			color: #EAFEFF;
		}

		&__text {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #2E2E2E;
			line-height: 43rpx;
			width: 646.88rpx;
		}

		&__pics {
			display: flex;
			align-items: center;
			margin: 20rpx 0 0;
			flex-wrap: wrap;

			&__pic {
				width: 45%;
				height: 180rpx;
				background: #C6CACD;
				border-radius: 10rpx;
				margin-bottom: 15rpx;
				margin-right: 20rpx;
			}

			&__pic1 {
				width: 33%;
				height: 180rpx;
				background: #616161;
				border-radius: 10rpx;
				margin-bottom: 15rpx;
				margin-right: 0;
			}

		}

		&__ht {
			display: flex;
			align-items: center;
			padding: 0 22rpx 0 16rpx;
			height: 48rpx;
			background: #F6F6F6;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 23rpx;
			color: #656565;

			&__icon {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;

			}
		}

		&__eye {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 23rpx;
			color: #999999;
		}

		&__icon {
			width: 36rpx;
			height: 36rpx;
			margin: 0 13rpx 0 30rpx;
		}

		&__num {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 23rpx;
			color: #000000;
		}
	}
</style>